<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页换肤</title>
    <style>
        .btn {
            width: 500px;
            height: 30px;
            margin: 0 auto;
        }
        .btn button {
            width: 30%;
            height: 100%;
        }
        .div {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            background: red;
        }
    </style>
</head>
<body>
    <div class="btn">
        <button onclick="change1()">红色</button>
        <button onclick="change2()">绿色</button>
        <button onclick="change3()">蓝色</button>
    </div>
    <div class="div"></div>
    <button onclick="clear1()">清除</button>
</body>
<script>
    let div = document.getElementsByClassName("div")[0];
    function change1() {
        div.style.backgroundColor = "red";
        localStorage.setItem("color", "red"); 
    }
    function change2() {
        div.style.backgroundColor = "green";
        localStorage.setItem("color", "green"); 
    }
    function change3() {
        div.style.backgroundColor = "blue";
        localStorage.setItem("color", "blue"); 
    }
    function clear1() {
        localStorage.removeItem("color");           // 清除某一个key
        // localStorage.clear();           // 清除全部的key
        alert("删除成功");
    }


    window.onload = function() {
        let color = localStorage.getItem("color");
        if(color){
            if(color == "red") {
                change1()
            }else if(color == "green") {
                change2();
            }else {
                change3();
            }
        }
    }

</script>
</html>